<template>
  <div class="container">
    <Breadcrumb :items="['menu.list', '消息管理']" />
    <a-card class="general-card" title="消息管理">
      <formCom
        ref="formComDom"
        :option="option"
        :keyCount="state.keyCount"
        @serachFn="searchFn"
      />

      <kxTable
        :table-data="list"
        :column-list="columnList"
        border
        :loading="listLoading"
      >
        <template #options="{ row }">
          <el-button link type="primary" @click="actionFn('read', row)"
            >标记已读</el-button
          >
          <el-button link plan type="danger" @click="actionFn('del', row)"
            >删除</el-button
          >
        </template>
      </kxTable>
    </a-card>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { useList } from '@/use/index';
  import { useUserStore } from '@/store';
  import {
    messageListApi,
    messageStatusUpdateApi,
    messageDelApi,
  } from '@/utils/apiConfig';
  const userStore = useUserStore();
  console.log('userStore.assetTypeList', userStore.assetTypeList);
  const {
    searchForm,
    list,
    listLoading,
    total,
    currentPage,
    pageSize,
    getList,
    handleSearch,
    resetSearch,
  } = useList(messageListApi);
  const router = useRouter();
  const route = useRoute();
  const {} = route.query;
  const state = reactive({});
  const option = reactive({
    labelWidth: '90px',
    isBetween: false, //false = float 布局
    position: 'left',
    formList: [
      {
        label: '时间',
        val: '',
        field: 'time',
        type: 'date',
        check_type: 9,
        width: '450px',
        rightMargin: true,
        disableFutureDate: (date: Date) => date.getTime() > Date.now(),
      },
      {
        label: '状态',
        val: '',
        field: 'status',
        type: 'select',
        width: '300px',
        rightMargin: true,
        chooseList: [
          { label: '未读', value: '0' },
          { label: '已读', value: '1' },
        ],
      },
      {
        label: '资产分类',
        val: '',
        field: 'assetType',
        type: 'select',
        width: '340px',
        rightMargin: true,
        chooseList: userStore.assetTypeList,
        chooseListField: ['deviceName', 'id'],
      },
    ],
    showSreach: true, //是否显示搜索按钮
  });
  const columnList = reactive([
    {
      label: '时间',
      prop: 'departmentName',
      minWidth: '120px',
    },
    {
      label: '内容',
      prop: 'departmentName',
      minWidth: '120px',
    },
    {
      label: '设备类型',
      prop: 'departmentName',
      minWidth: '180px',
    },
    {
      label: '状态',
      prop: 'departmentName',
      minWidth: '120px',
    },

    {
      slot: 'operation',
      width: '250',
      label: '操作',
      prop: 'options',
      notooltip: true,
      fixed: 'right',
    },
  ]);
  function inits() {}
  function actionFn(type: string, item: any) {
    switch (type) {
      case 'read':
        messageStatusUpdateApi({ addId: item.id })
          .then(() => {
            ElMessage.success('标记已读');
            getList();
          })
          .catch(() => {});
        break;
      case 'del':
        console.log(item.departmentName);
        ElMessageBox.confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            console.log('del-api');
            messageDelApi({ addPath: item.id })
              .then(() => {
                ElMessage.success('删除成功');
                getList();
              })
              .catch(() => {});
          })
          .catch(() => {});
        break;

      default:
        break;
    }
  }

  function searchFn(obj: any) {
    const [startTime, endTime] = obj.time || [];
    console.log(222, obj);
    searchForm.value = {
      ...obj,
      startTime,
      endTime,
    };
    getList(1);
  }
  onMounted(() => {
    inits();
    getList();
  });
</script>
<style lang="less" scoped>
  .container {
    padding: 20px;
  }
</style>
